<template>
  <div class="topbar">
    <div class="container">
      <div class="top-info">
       
       <a href="/index"><i class="el-icon-s-home" style="color:#b0b0b0;margin-right:10px;vertical-align:text-bottom;font-size:20px"></i>首页</a>
      </div>
      <div class="top-user">
        <img v-if="isLogin" :src="user.headImg ? user.headImg : 'https://mall-bucket-2.oss-cn-beijing.aliyuncs.com/72d1e6ee17204eabb4bcfebc2f269c4c.jpg'" alt="" @click="toUser">
        <a href="/user" v-if="isLogin">{{ user.nickName }}</a>
        <a href="javascript:;" v-if="isLogin" @click="logout">退出</a>
        <a href="javascript:;" v-if="!isLogin" @click="login">登录</a>
        <a href="/sale" v-if="isLogin">交易中心</a>
        <a href="/daity" v-if="isLogin">论坛中心</a>
        <a href="/publish" v-if="isLogin">发布商品</a>
        <a href="/photo" v-if="isLogin">图片中心</a>
        <a href="/order/list" v-if="isLogin">我的订单</a>
        <!-- <a href="/comment" v-if="isLogin">我的评价</a> -->
        <a href="/address" v-if="isLogin">收货地址</a>
        <a href="javascript:;" v-if="!isLogin" @click="login">注册</a>

        <!-- <a href="javascript:;" v-if="isLogin" class="shopcart" @click="goCart">
          <span class="icon-cart"></span>
          <i class="cart-total">购物车({{ cartNum }})</i>
        </a> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: "TopBar",
  props: {
    userName: String,
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['user', 'cartNum']),
    isLogin () {
      return Object.keys(this.user).length > 0
    }
  },
  mounted () {
    if (this.isLogin) {
      // this.getCartList()
    }
  },
  methods: {
    ...mapMutations(['saveUser', 'setCartNum', 'clearAllState']),
    /**
     * 去用户详情页
     */
    toUser () {
      this.$router.push({
        path: '/user'
      })
    },
    /**
     * 获取购物车
     */
    getCartList() {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.cartByUser(query).then(res => {
        if (res.code === 200) {
          // res.data.forEach(item => {
          //   this.$set(item, 'selected', false)
          // })
          this.setCartNum(res.data.length)
        }
      })
    },
    login() {
      this.$router.push("/login");
    },
    logout() {
      // this.saveUser({})
      this.clearAllState()
      sessionStorage.clear()
      this.$router.push("/login")
    },
    goCart() {
      // 如果用户是登录状态，name直接跳转到用户购物车页面
      if (this.isLogin) {
        this.$router.push("/cart");
      } else {
        // 如果用户不是登录状态,那么直接跳转到登录页面
        this.$router.push("/login");
      }
    },
  },
};
</script>
<style scoped>
.topbar {
  width: 100%;
  height: 39px;
  background-color: #333333;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 39px;
}
.top-info{

}
.container a {
  color: #b0b0b0;
  margin-right: 17px;
  font-weight: 600;
}
.top-user img {
  cursor: pointer;
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 50%;
}
.top-user .shopcart {
  display: inline-block;
  position: relative;
  width: 110px;
  height: 39px;
  background-color: #666666;
  color: aliceblue;
  margin-right: 0;
}
.top-user .icon-cart {
  position: absolute;
  top: 13px;
  left: 18px;
  width: 16px;
  height: 12px;
  background: url("/imgs/icon-cart.png") no-repeat;
  background-size: contain;
}
.shopcart .cart-total {
  margin-left: 38px;
}
</style>
